<template>
    <div class="report_container">
      <div class="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>数据统计</el-breadcrumb-item>
          <el-breadcrumb-item>数据列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!--卡片视图-->
      <el-card>
        <div ref="echartsDiv" style="width:900px;height:400px;"></div>
      </el-card>
    </div>
</template>

<script>
  import echarts from 'echarts';
  import connector from '../../base/interface.js';
    export default {
      name: "Report",
      data(){
        return{
          /*需要合并的数据*/
          options: {title: {text: '用户来源'},
            tooltip: {trigger: 'axis', axisPointer: {
                type: 'cross',
                label: {backgroundColor: '#E9EEF3'}
              }
            },
            grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
            xAxis: [{boundaryGap: false}],
            yAxis: [{type: 'value'}]
          }
        }
      },
      methods:{},
      created() {


      },mounted() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(this.$refs.echartsDiv);
        // 指定图表的配置项和数据
        connector.getReports().then(res=>{
          var {data:data}=res;
          // 使用刚指定的配置项和数据显示图表。
          /*合并两个对象*/
          myChart.setOption({...this.options,...data.data});
        });
      }
    }
</script>

<style lang="scss" scoped>
.report_container{

}
</style>
